<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box{
            width: 220*7px;
            position: relative;
        }
        img{
            width: 250px;
            display: block;
        }
        .item{
            box-shadow: 2px 2px 2px rosybrown;
            position: absolute;
        }
    </style>
</head>
<body>
    <div id="box">
        <div class="item"><img src="./imgPoll/0ebb8f078c63a043d591315ef84673a.jpg" alt=""></div>
        <div class="item"><img src="./imgPoll/b17733b1c74c50e6b67f0306f6316b3.jpg" alt=""></div>
        <div class="item"><img src="./imgPoll/c37a3e27d9448517587566e34c7d99d.jpg" alt=""></div>
        <div class="item"><img src="./imgPoll/c4faefec5cdf9f65993fafc2c1ac326.jpg" alt=""></div>
        <div class="item"><img src="./img/1623040355(1).png" alt=""></div>
        <div class="item"><img src="./img/good_03.jpg" alt=""></div>
        <div class="item"><img src="./img/logo_03.jpg" alt=""></div>
        <div class="item"><img src="./img/1623040355(1).png" alt=""></div>
        <div class="item"><img src="./img/1623040355(1).png" alt=""></div>
        <div class="item"><img src="./img/1623040355(1).png" alt=""></div>
        <div class="item"><img src="./img/1623040355(1).png" alt=""></div>
        <div class="item"><img src="./imgPoll/c37a3e27d9448517587566e34c7d99d.jpg" alt=""></div>
        <div class="item"><img src="./imgPoll/c4faefec5cdf9f65993fafc2c1ac326.jpg" alt=""></div>
        <div class="item"><img src="./img/1623040355(1).png" alt=""></div>
        <div class="item"><img src="./img/good_03.jpg" alt=""></div>
        <div class="item"><img src="./img/logo_03.jpg" alt=""></div>
        <div class="item"><img src="./img/1623040355(1).png" alt=""></div>
        <div class="item"><img src="./imgPoll/c37a3e27d9448517587566e34c7d99d.jpg" alt=""></div>
    </div>
</body>
</html>
<script>
     var box = document.getElementById("box");  //获取大容器div
    var items = box.children;                   //获取大容器div 里面的子集 
    var gap = 10;                               //填充缝隙美观
 
    window.onload= function(){                 //页面初始化
        console.log('获取子集div_img', items)
        wateFall()                              //瀑布流函数
        function wateFall(){
        var pageWidth = getClient().width;      //视口宽度
        var itemWidth = items[0].offsetWidth    //
        // column = pageWidth/itmeWidth
        var columns = parseInt(pageWidth/(itemWidth+gap)) //计算列（取整）
        var arr = [];                           //定义了一个数组把第一行的高度push到里面去  存储高度值
        for(var i = 0; i<items.length; i++){
            if(i<columns){                      //确定第一行（图片盒子index标<列数那么是第一行）
                items[i].style.top = 0;         //确定第一行 定位的top值 
                items[i].style.left = (itemWidth+gap)*i+"px";  //确定第一行 定位的left值 
                arr.push(items[i].offsetHeight);//push第一行的高度    
            }else{
                //其他行的排列  找到第一行的最小高度 和最小index标
                var minHeight = arr[0];         //最小高度
                var index = 0;                  //最小index 
                for(var j=0; j<arr.length; j++){//循环找到数组中最小的 排序判断去
                    if(minHeight >arr[j]){      //>后是错误的 让他们交换位置
                        minHeight = arr[j];
                        index = j;
                    }
                }
                // 设置下一行 第一个图片的位置
                items[i].style.top = arr[index] + gap + "px";   //此时arr[index]是最小那一个 + gap + "px"
                // left 第二行的
                items[i].style.left = items[index].offsetLeft + "px";
                // 改变高度 改变最小列的高度 
                arr[index] =  arr[index] + items[i].offsetHeight + gap + "px";  //拼接相加
            }   
        }


    }   
    // 兼容函数
    function getClient(){
        return{
            width:window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth,
            height:window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight,
        }
    }

    }
    //2021-06-22-夜
    /**
     * 瀑布流思路分析 （绝对定位的瀑布流）
     * 1 获取页面的宽度
     * 2 获取图片盒子的宽度
     * 3 column显示的列数 = pageWidth页面的宽度/itemWidth图片盒子宽度  
     *   column = pageWidth/itemWidth  
     * 4 通过定位的方式先排列第一行的 
     *     确定列数后 排列第一行 在for循环里面判断一下 当i所属图片盒子的下标index < column（显示列数）的时候说明是显示在第一行的 
     *     知道在第一行之后 动态设置每一个图片盒子的left值就能排好第一行
     *     left = i*(itemWIdth + gap)
     * 5 第一行排列好之后，获取第一行所以图片盒子的高度
     *     需要定义一个数组arr 用于把获取到的高度存在数组中 
     *     因为第二行排列的时候需要考虑top值,此时只能根据第一行图片盒子的高度来设置 
     *     
     * !注意了 
     *      图片资源可能是静态的&动态的等
     *      获取图片高度的时候，程序代码必须写在入口函数onload函数里，
     *      图片的加载特性是: 等页面加载完之后才去加载，所以不写在入口函数中可能会拿不到高度 
     * 
     * 6 排列第二行 获取到刚刚数组中的高度最小值的那一列，把第二行的第一个图片放在他的下面
     *      此时的left值就是高度最小列的offSetLeft
     *      top值就是第一行高度最小列的高度  （可根据需求美观加上缝隙gap）
     *      记录下高度最小列的index标 后面计算用 
     * 
     * 设置完成之后,会发现后面所有图片都叠在这一列下面了，因为最小列的高度没有改变，要加上下面图片的高度，得出一个新的高度
     * 
     * 7  改变的这一列高度其实已经发生改变(就是说我们定位的第二列的第一个已经不是最小高度了) 
     *       所以需要将新高度赋值给数组去 
     *       当前高度最小列的高度 = 当前高度最小列的高度 + 缝隙 + 下面图片盒子的高度   
     *       arr[index] = arr[index] + gap + items[i].offsetHeight
     * 
     * 8  触发resize事件
     *    将整个设置样式的部分封装成一个函数，在onlode里面注册一个resize事件，只要页面一发生，就触发样式部分的代码，
     *    实现改变pageWIdth的宽度，这样瀑布流就会是一个响应式的效果*/ 
</script>